<script>
import outMain from "@/components/outMain.vue";
import interviewForm from "@/views/modules/interviewForm.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  positiontdGlcy,
  positiontdRecord,
  PositionDetail,
  inviteInterview,
  details_msjl,
  details_qyjl,
} from "@/http/api";
export default {
  components: { outMain, interviewForm },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      showInterview: false,
      interviewId: "",
      stepArr: [
        { name: "基本信息", id: 1 },
        { name: "投递记录", id: 2 },
        { name: "备选船员", id: 5 },
        { name: "面试记录", id: 3 },
        { name: "签约记录", id: 4 },
      ],
      stepId: 1,
      tableData: [],
      queryData: {
        enterprise_position_id: this.$route.query.id,
        page: 1,
        per_page: 20,
      },
      total: 0,
      formData: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    linkFn(url, id, navId) {
      if (id == 0) {
        return false;
      }
      this.$router.push({ path: url, query: { id: id, navId: navId } });
    },
    async sureInterview(formData) {
      const { data } = await inviteInterview(formData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: "邀请成功",
        });
        this.getData();
        this.showInterview = false;
      }
    },
    interviewFn(row) {
      this.interviewId = row.biographical_notes_id;
      this.showInterview = true;
    },
    recordDetail(id) {
      this.$router.push({ path: "/salaPublicDetail", query: { id: id } });
    },
    navFn(item) {
      this.stepId = item.id;
      if (item.id != 1) {
        this.queryData.page = 1;
        this.serchFn();
      }
    },
    serchFn() {
      if (this.stepId == 2) {
        this.getRecord();
      } else if (this.stepId == 3) {
        this.details_msjlFn();
      } else if (this.stepId == 4) {
        this.details_qyjlFn();
      } else if (this.stepId == 5) {
        this.getGlcyFn();
      }
    },
    getData() {
      PositionDetail({ enterprise_position_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          this.formData = res.data.data;
        }
      });
    },
    async details_msjlFn() {
      const { data } = await details_msjl(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async details_qyjlFn() {
      const { data } = await details_qyjl(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getRecord() {
      const { data } = await positiontdRecord(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    async getGlcyFn() {
      const { data } = await positiontdGlcy(this.queryData);
      if (data.code == 1) {
        this.tableData = data.data.data;
        this.total = data.data.total;
      }
    },
    backFn() {
      this.$router.back();
    },
  },
  mounted() {},
  created() {
    this.stepId = this.$route.query.navId || 1;
    console.log(this.stepId);
    this.getData();
    if (this.stepId != 1) {
      this.serchFn();
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formStep">
        <div class="formHead">
          <div>岗位详情</div>
          <btn value="返回上一级" @ok="backFn"></btn>
        </div>
        <div class="formMain">
          <div class="stepNav">
            <div
              :class="stepId == item.id ? 'stepItemActive' : 'stepItem'"
              @click="navFn(item)"
              :key="index"
              v-for="(item, index) in stepArr"
            >
              {{ item.name }}
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 1">
            <div class="formDes">
              <div class="desTitle">基本信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">岗位职务</div>
                  <div class="desText">{{ formData.position_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">岗位类型</div>
                  <div class="desText">
                    <el-tag type="danger" v-if="formData.position_type == 1"
                      >急聘岗位</el-tag
                    >
                    <el-tag v-if="formData.position_type == 2">普通岗位</el-tag>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">岗位月薪</div>
                  <div class="desText">
                    <div v-if="formData.start_monry == '0'">面议</div>
                    <div v-else>
                      {{ formData.start_monry }}~{{ formData.end_monry }}({{
                        formData.unit == 1 ? "元" : "美元"
                      }})
                    </div>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">招聘人数</div>
                  <div class="desText">{{ formData.zprs }}(人)</div>
                </div>
                <div class="desItem">
                  <div class="desName">岗位状态</div>
                  <div class="desText">
                    <el-tag type="success" v-if="formData.position_status == 1"
                      >招聘中</el-tag
                    >
                    <el-tag type="info" v-if="formData.position_status == 2"
                      >已关闭</el-tag
                    >
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">换员港口</div>
                  <div class="desText">{{ formData.hygk }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">上船时间</div>
                  <div class="desText">{{ formData.scsj }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">证书要求</div>
                  <div class="desText">甲一</div>
                </div>
                <div class="desItem">
                  <div class="desName">名企背景</div>
                  <div class="desText">
                    <span v-if="formData.mqbj == 1">国企</span>
                    <span v-if="formData.mqbj == 2">知名企业</span>
                    <span v-if="formData.mqbj == 3">不限</span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">学历要求</div>
                  <div class="desText">{{ formData.xlyq }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">国籍要求</div>
                  <div class="desText">{{ formData.gjyq }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">语言能力</div>
                  <div class="desText">{{ formData.yynl }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">年龄要求</div>
                  <div class="desText">{{ formData.nlyq }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">工作经验</div>
                  <div class="desText">{{ formData.gzjy }}</div>
                </div>
                <div class="desItem" v-if="formData.c_enterprise_name">
                  <div class="desName">船东公司</div>
                  <div class="desText">
                    <span
                      :class="formData.c_enterprise_id == 0 ? '' : 'linkText_'"
                      @click="
                        linkFn(
                          '/cooperationBooterDetail',
                          formData.c_enterprise_id
                        )
                      "
                    >
                      {{ formData.c_enterprise_name.name }}
                      <span v-if="formData.position_fb_type === 1"
                        >(本企业)</span
                      >
                    </span>
                  </div>
                </div>

                <div class="desItem" v-if="formData.c_enterprise_name">
                  <div class="desName">发布员工</div>
                  <div class="desText">
                    <span
                      :class="formData.staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('/staffListDetail', formData.staff_id)"
                    >
                      {{ formData.gl_staff.name }}
                    </span>
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">发布时间</div>
                  <div class="desText">{{ formData.create_time }}</div>
                </div>
              </div>
            </div>
            <div class="formDes">
              <div class="desTitle">职位描述</div>
              <div class="desCont">
                <div class="desItem" style="width: 100%">
                  <div class="desText">{{ formData.gwms }}</div>
                </div>
              </div>
            </div>
            <div class="formDes">
              <div class="desTitle">船舶信息</div>
              <div class="desCont">
                <div class="desItem">
                  <div class="desName">船舶名称</div>
                  <div class="desText">{{ formData.watercraft_name }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶类型</div>
                  <div class="desText">{{ formData.watercraft_type }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船旗</div>
                  <div class="desText">{{ formData.watercraft_colors }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">呼号</div>
                  <div class="desText">{{ formData.watercraft_hh }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">imo</div>
                  <div class="desText">{{ formData.watercraft_imo }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶载货量</div>
                  <div class="desText">
                    {{ formData.watercraft_num }}{{ formData.watercraft_dw }}
                  </div>
                </div>
                <div class="desItem">
                  <div class="desName">船舶航区</div>
                  <div class="desText">{{ formData.watercraft_area }}</div>
                </div>
                <div class="desItem">
                  <div class="desName">造船时间</div>
                  <div class="desText">{{ formData.watercraft_zcsj }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 2 || stepId == 5">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">
                {{
                  stepId == 2 ? "投递过此岗位的船员" : "备选此岗位的船员"
                }}（{{ total }}）
              </div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="real_name"
                  show-overflow-tooltip
                  label="船员姓名"
                />
                <el-table-column
                  prop="mobile"
                  show-overflow-tooltip
                  label="手机号"
                />
                <el-table-column
                  prop="gzjy"
                  show-overflow-tooltip
                  label="工作经验"
                >
                  <template #default="{ row }">{{ row.gzjy }}年</template>
                </el-table-column>
                <el-table-column prop="xl" show-overflow-tooltip label="学历" />

                <el-table-column
                  prop="qwyx"
                  show-overflow-tooltip
                  label="期望薪资"
                >
                  <template #default="{ row }">${{ row.qwyx }}</template>
                </el-table-column>

                <el-table-column
                  prop="create_time"
                  width="180"
                  show-overflow-tooltip
                  label="投递时间"
                />
                <el-table-column prop="Name" width="120" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="recordDetail(row.biographical_notes_id)"
                      >
                        详情
                      </div>
                      <div class="blueText ctrlText" @click="interviewFn(row)">
                        邀面试
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 3">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">此岗位面试记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="b_real_name"
                  show-overflow-tooltip
                  label="船员姓名"
                >
                  <template #default="{ row }">
                    <span
                      class="linkText_"
                      @click="
                        linkFn('salaPublicDetail', row.biographical_notes_id)
                      "
                    >
                      {{ row.b_real_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="cdxm"
                  width="200"
                  show-overflow-tooltip
                  label="面试公司"
                >
                  <template #default="{ row }">
                    <span
                      :class="
                        row.interview_enterprise_id == 0 ? '' : 'linkText_'
                      "
                      @click="
                        linkFn(
                          'cooperationBooterDetail',
                          row.interview_enterprise_id
                        )
                      "
                    >
                      {{ row.cdxm }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="interview_time"
                  show-overflow-tooltip
                  label="面试时间"
                />
                <el-table-column
                  prop="xl"
                  show-overflow-tooltip
                  label="面试状态"
                >
                  <template #default="{ row }">
                    <div class="tagGroup">
                      <el-tag v-if="row.interview_status == 1">面试中</el-tag>
                      <el-tag type="success" v-if="row.interview_status == 2"
                        >面试成功</el-tag
                      >
                      <el-tag type="danger" v-if="row.interview_status == 3"
                        >面试失败</el-tag
                      >
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qwyx"
                  show-overflow-tooltip
                  label="操作员工"
                >
                  <template #default="{ row }">
                    <span
                      :class="row.staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('staffListDetail', row.staff_id)"
                    >
                      {{ row.staff_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="Name" width="60" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="
                          linkFn('bootInviteDetail', row.invite_interview_id)
                        "
                      >
                        详情
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
          <div class="stepCont" v-show="stepId == 4">
            <div class="formDes flexPull flexColumn">
              <div class="desTitle">此岗位签约记录（{{ total }}）</div>
              <el-table
                class="tableMain"
                :data="tableData"
                stripe
                style="width: 100%"
              >
                <el-table-column
                  prop="cy_sign_number"
                  width="160"
                  show-overflow-tooltip
                  label="签约单号"
                />
                <el-table-column
                  prop="qy_enterprise_name"
                  show-overflow-tooltip
                  width="200"
                  label="船东公司"
                >
                  <template #default="{ row }">
                    <span
                      :class="row.qy_enterprise_id == 0 ? '' : 'linkText_'"
                      @click="
                        linkFn('cooperationBooterDetail', row.qy_enterprise_id)
                      "
                    >
                      {{ row.qy_enterprise_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qy_real_name"
                  show-overflow-tooltip
                  label="船员姓名"
                >
                </el-table-column>
                <el-table-column prop="SBType" label="管理模式">
                  <template #default="{ row }">
                    <el-tag v-if="row.qy_glms == 1">企业代管</el-tag>
                    <el-tag type="info" v-if="row.qy_glms == 2"
                      >船东自管</el-tag
                    >
                    <el-tag type="warning" v-if="row.qy_glms == 3"
                      >企业自管</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qy_cyxz"
                  show-overflow-tooltip
                  label="船员薪资"
                >
                  <template #default="{ row }">
                    <span
                      >{{ row.qy_cyxz_dw == 1 ? "¥" : "$"
                      }}{{ row.qy_cyxz }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="authBook"
                  show-overflow-tooltip
                  label="证书状态"
                >
                  <template #default="{ row }">
                    <el-tag type="success" v-if="row.zs_status == 0"
                      >正常</el-tag
                    >
                    <el-tag type="danger" v-if="row.zs_status > 0"
                      >{{ row.zs_status }}个到期</el-tag
                    >
                  </template>
                </el-table-column>

                <el-table-column prop="SBType" label="任职状态">
                  <template #default="{ row }">
                    <el-tag type="success" v-if="row.lz_sh_status == 0"
                      >在职</el-tag
                    >
                    <el-tag type="info" v-if="row.lz_sh_status == 2"
                      >已离职</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  prop="qy_staff_name"
                  show-overflow-tooltip
                  label="操作员工"
                >
                  <template #default="{ row }">
                    <span
                      :class="row.qy_staff_id == 0 ? '' : 'linkText_'"
                      @click="linkFn('staffListDetail', row.qy_staff_id)"
                    >
                      {{ row.qy_staff_name }}
                    </span>
                  </template>
                </el-table-column>
                <el-table-column prop="Name" width="60" label="操作">
                  <template #default="{ row }">
                    <div class="tableCtrl">
                      <div
                        class="greenText ctrlText"
                        @click="linkFn('bootSignDetail', row.cy_sign_id)"
                      >
                        详情
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  v-model:currentPage="queryData.page"
                  v-model:page-size="queryData.per_page"
                  background
                  layout="total, prev, pager, next, jumper"
                  :total="total"
                  @size-change="serchFn"
                  @current-change="serchFn"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog v-model="showInterview" title="邀请面试" width="600">
        <interviewForm
          @cancel="showInterview = false"
          @ok="sureInterview"
          :interviewId="interviewId"
        ></interviewForm>
      </el-dialog>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
